Code Playground

<a class="dribbble" href="https://dribbble.com/shots/5730764-Add-file-animation" target="_blank"><img src="https://cdn.dribbble.com/assets/dribbble-ball-mark-2bd45f09c2fb58dbbfb44766d5d1d07c5a12972d602ef8b32204d28fa3dda554.svg" alt=""></a>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

@import url('https://fonts.googleapis.com/css?family=Mukta+Malar:400,500,600');
$background: #5628EE;
$backgroundLight: #8C6FF0;
$word: #DAEDFE;
$wordColor: #46A7FE;
$powerpoint: #FDE5E1;
$powerpointColor: #F57F65;
$excel: #D4F5DF;
$excelColor: #2ACF62;

.fileAdd {
    width: 32px;
    height: 24px;
    background: $background;
    border-radius: 0 3px 3px 3px;
    position: relative;
    margin: 2px 0 0 0;
    perspective: 32px * 5;
    cursor: pointer;
    &:before {
        content: '';
        border-radius: 2px 2px 0 0;
        background: inherit;
        height: 2px;
        width: 20px;
        display: block;
        position: absolute;
        top: -2px;
        left: 0;
    }
    div {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 20px;
        background: $backgroundLight;
        border-radius: 2px 2px 3px 3px;
        z-index: 2;
        transition: transform .25s ease;
        transform-origin: 50% 100%;
        span {
            display: block;
            width: 10px;
            height: 10px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin: -5px 0 0 -5px;
            transition: transform .35s cubic-bezier(0.2, 0.8, 0.3, 1.4);
            &:before,
            &:after {
                content: '';
                height: 10px;
                width: 2px;
                border-radius: 1px;
                background: #fff;
                display: block;
                position: absolute;
                left: 4px;
                top: 0;
            }
            &:before {
                transform: scaleX(.75);
            }
            &:after {
                transform: scaleY(.75) rotate(90deg);
            }
        }
    }
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        perspective: 300px;
        li {
            --translateY: 0;
            --translateX: 0;
            --scale: .92;
            bottom: 0;
            left: 6px;
            position: absolute;
            width: 20px;
            height: 26px;
            transition: transform .45s ease;
            transform: translateY(var(--translateY)) translateX(var(--translateX)) scaleX(var(--scale));
            &:before,
            &:after {
                --rotateY: 0deg;
                --rotateZ: 90deg;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border-radius: 2px;
                backface-visibility: hidden;
                transform-style: preserve-3d;
                transition: transform .4s ease;
                transform: rotateY(var(--rotateY)) rotateZ(var(--rotateZ));
            }
            &:after {
                --rotateY: -180deg;
                z-index: 1;
                text-align: center;
                font-size: 10px;
                font-weight: 600;
                color: #fff;
                line-height: 26px;
                font-family: 'Mukta Malar';
            }
            &.word {
                &:before {
                    background: mix($background, #fff, 70%);
                }
                &:after {
                    background: $word;
                    color: $wordColor;
                    content: 'W';
                }
            }
            &.powerpoint {
                --translateY: 1px;
                --scale: .96;
                &:before {
                    background: mix($background, #fff, 40%);
                }
                &:after {
                    background: $powerpoint;
                    color: $powerpointColor;
                    content: 'P';
                }
            }
            &.excel {
                --translateY: 2px;
                --scale: 1;
                &:before {
                    background: #fff;
                }
                &:after {
                    background: $excel;
                    color: $excelColor;
                    content: 'E';
                }
            }
        }
    }
    &:hover {
        div {
            transform: rotateX(-30deg);
        }
    }
    &:active {
        span {
            transform: scale(.84);
        }
    }
    &.open {
        div {
            transform: rotateX(-30deg);
            span {
                transform: rotateZ(45deg);
            }
        }
        &:active {
            span {
                transform: scale(.84) rotateZ(45deg);
            }
        }
        ul {
            li {
                --scale: 1;
                &:before {
                    --rotateY: 180deg;
                    --rotateZ: 0deg;
                }
                &:after {
                    --rotateY: 0deg;
                    --rotateZ: 0deg;
                }
                &.word {
                    --translateY: -32px;
                    --translateX: -36px;
                    &:hover {
                        --translateY: -30px;
                    }
                }
                &.powerpoint {
                    --translateY: -44px;
                    --translateX: 0px;
                    &:hover {
                        --translateY: -42px;
                    }
                }
                &.excel {
                    --translateY: -32px;
                    --translateX: 36px;
                    &:hover {
                        --translateY: -30px;
                    }
                }
            }
        }
    }
}

.tabbar {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    & > li {
        margin: 0 11px;
        & > svg {
            width: 14px;
            height: 14px;
            display: block;
            fill: #2F3545;
            transition: opacity .3s ease;
        }
    }
    &.open {
        & > li {
            & > svg {
                opacity: .5;
            }
        }
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    background: #171C28;
    display: flex;
    justify-content: center;
    align-items: center;
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
}

Frontend Forever App